<template>
  
    <el-card class="card" style="max-width: 80vw">
      <div class="card-header">
        <el-text class="mx-1">事务类型：</el-text>
        <el-select v-model="typeSelect" @change="onOptionChange" placeholder="--请选择--" style="width: 150px">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="transApp">
        <el-table class="listTable" :data="affListData" :border=true style="width: 100%" :max-height="'70vh'">
          <el-table-column prop="affName" label="所属社团" :width="tableWidth[0]" :align="'center'" />
          <el-table-column prop="type" label="事务类型" :width="tableWidth[1]" :align="'center'" />
          <el-table-column prop="userName" label="发起人" :width="tableWidth[2]" :align="'center'" />
          <el-table-column prop="submitTime" label="发送时间" :width="tableWidth[3]" :align="'center'" />
          <el-table-column prop="options" label="操作" :width="tableWidth[4]" :align="'center'">
            <template #default="scope">
              <el-button id="buttonAffShow" @click="handleInDetails(scope.row)">查看详情</el-button>
              <el-button id="buttonYes" @click="onAccept(scope.row)">通过</el-button>
              <el-button id="buttonNo" @click="onReject(scope.row)">驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerpager">
        <el-select v-model="pageSize" @change="onOptionChange" placeholder="Select" style="width: 120px">
          <el-option v-for="size in pageSizeOptions" :key="size.value" :label="size.label" :value="size.value" />
        </el-select>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
          :pager-count="7" @current-change="handleUpdateList" layout="prev, pager, next" :total="totalNum" />
        <div class="pageNow">
          当前
          <input class="pageInput" @blur="onChangePage" v-model="setCurrentPage" />
          页，共
          {{ totalPage }}
          页
        </div>
      </div>
    </el-card>

  <el-dialog v-model="DialogVisible" :title=affairName width="600" align-center>
    <!-- 创建新社团的详细信息 -->
    <div v-if="newClub">
     <div class="dialogItem">新社团名称：{{ newAffairInfo.value1 }}</div>
     <div class="dialogItem">新社团等级：{{ newAffairInfo.value3 }}</div>
     <div class="dialogItem">新社团简介：{{ newAffairInfo.value4 }}</div>
     <div class="dialogItem">新社团负责人：申请发起人</div>
    </div>
    <!-- 修改社团信息的详细信息 -->
    <div v-if="modifyClub">
      <div class="dialogItem" v-show="modifyJuide.avatar">修改后的头像：
        <el-image  class="imageAvatar" :src="newAffairInfo.value5" fit="cover" />
      </div>
      <div v-show="modifyJuide.clubName" class="dialogItem">修改后的社团名称：{{ newAffairInfo.value1 }}</div>
      <div v-show="modifyJuide.level" class="dialogItem">修改后的社团等级：{{ newAffairInfo.value3 }}</div>
      <div v-show="modifyJuide.admin" class="dialogItem">修改后的管理员：{{ newAffairInfo.value2 }}</div>
      <div v-show="modifyJuide.state" class="dialogItem">修改后的社团状态：{{ newAffairInfo.value6 }}</div>
      <div v-show="modifyJuide.introduction" class="dialogItem">修改后的介绍：{{ newAffairInfo.value4 }}</div>
    </div>
    <div v-if="ifReason" class="dialogItem">申请原因：{{ newAffairInfo.reason }}</div>
    <div v-if="createArticle">
      <div class="dialogItem">作品标题： {{ newAffairInfo.value1 }} </div>
      <div class="dialogItem">作品类型： {{ newAffairInfo.value3 }} </div>
      <div class="dialogItem">作品头图：</div> 
      <el-image style="height: 200px" :src="newAffairInfo.value5" fit="cover" />
      <div class="dialogItem">作品内容:
        <div  v-if="newAffairInfo.value3=='文章'" id="workDisplay" v-html="articleContent"></div>
        <video v-else-if="newAffairInfo.value3=='视频'" controls :src="newAffairInfo.value4" width="100%"> </video>
       </div>
    </div>
    <div v-if="modifyArticle">
      <div  v-show="modifyJuide.articleName" class="dialogItem">修改后作品标题： {{ newAffairInfo.value1 }} </div>
      <div  v-show="modifyJuide.clubId" class="dialogItem">修改后作品所属社团： {{ newAffairInfo.value2 }} </div>
      <div  v-show="modifyJuide.articleType" class="dialogItem">修改后作品类型： {{ newAffairInfo.value3 }} </div>
      <div  v-show="modifyJuide.headImage" class="dialogItem">修改后作品头图：</div>
      <el-image v-show="modifyJuide.headImage" style="height: 200px" :src="newAffairInfo.value5" fit="cover" />
      <div  v-show="modifyJuide.article"  class="dialogItem">修改后作品内容:   
        <div v-if="newAffairInfo.value3=='文章'" id="workDisplay" v-html="articleContent"></div>
        <video v-else-if="newAffairInfo.value3=='视频'" controls :src="newAffairInfo.value4"  width="100%"> </video>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="DialogVisible = false">关闭详情</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '@/api';
import userStore from '@/stores/store';
import { onMounted, reactive, ref, watch, onUnmounted } from 'vue';
import showMessageTip from '@/utils/showMessage';
import debounce from '@/utils/debounce';

const tableWidth = ref([]);
const DialogVisible = ref(false)
const tableWidthRatio = ref([0.25, 0.15, 0.11, 0.24, 0.25]);
const affListData = ref([]);
const pageSize = ref(10);
const currentPage = ref(1);
const totalNum = ref(0);
const totalPage = ref(1); //总页数
const pageSizeOptions = ref([
  { value: 5, label: '5条/页' },
  { value: 10, label: '10条/页' },
  { value: 15, label: '15条/页' },
  { value: 20, label: '20条/页' },
])
const typeList = ref([]);
const typeSelect = ref(0);
const setCurrentPage = ref();
const newClub=ref(false);
const joinClub=ref(false);
const exitClub=ref(false);
const modifyClub=ref(false);
const createArticle=ref(false);
const modifyArticle=ref(false);
const ifReason=ref(false);
const newAffairInfo =ref({});
const affairName = ref('');
const modifyJuide= ref({
  avatar:ref(true),
  clubName:ref(true),
  level:ref(true),
  state:ref(true),
  admin:ref(true),
  introduction:ref(true),
  articleName:ref(true),
  articleType:ref(true),
  clubId:ref(true),
  article:ref(true),
  headImage:ref(true),

});
var debounceSetColumnSize = null;
const articleContent = ref('');


onMounted( () => {
  const width = document.querySelector('.card').getBoundingClientRect().width - 40;
  tableWidth.value[4]=width;
  for(let i = 0; i<4 ;i++){
    tableWidth.value[i] = tableWidthRatio.value[i]*width;
    tableWidth.value[4] -= tableWidth.value[i];
  }
});
onMounted( () => {
  debounceSetColumnSize = debounce(setColumnSize, 300);
  window.addEventListener('resize', debounceSetColumnSize);
})
onUnmounted(() => {
  window.removeEventListener('resize', debounceSetColumnSize);
  debounceSetColumnSize.cancel();
});
const setColumnSize = () => {
  const width = document.querySelector('.card').getBoundingClientRect().width-40;
  tableWidth.value[4]=width;
  for(let i = 0; i<4 ;i++){
    tableWidth.value[i] = tableWidthRatio.value[i]*width;
    tableWidth.value[4] -= tableWidth.value[i];
  }
}

onMounted( () => {
  const permission = userStore().getPermission;
  if(permission == 2 || permission == 3){
    typeList.value = [
    { value: 0, label: '全部' },
    { value: 1, label: '加入社团' },
    { value: 2, label: '离开社团' },
    { value: 3, label: '添加作品' },
    { value: 4, label: '修改作品' },
    ];
  }
  else if(permission == 1 || permission == 0)
  {
    typeList.value = [
      { value: 0, label: '全部' },
      { value: 1, label: '添加社团' },
      { value: 2, label: '修改社团信息' },
    ];
  }
  handleUpdateList();
})
const handleInDetails=async(rowData)=>{
  DialogVisible.value=true;
  const tempAffairId = ref({
    id: rowData.affairId
  });
  const result = await api.getAffairInfo(tempAffairId.value);
  if(result[0]==0){
    const data= result[1].data.data;
    
    if(data.bigAffairType==1){
      switch(data.affairType){
        case 1:{
            clearShow();
            newClub.value=true;
            affairName.value='创建新社团'
            newAffairInfo.value =data;
            if(newAffairInfo.value.value3==1){
              newAffairInfo.value.value3='院级社团';
            }
            else if(newAffairInfo.value.value3==0){
              newAffairInfo.value.value3='校级社团';
            }
          break;
        }
        case 2:{
            affairName.value='社团信息修改'
            newAffairInfo.value =data
            switch(newAffairInfo.value.value6){
              case 0:
              newAffairInfo.value.value6='可加入'
                break;
              case 1:
              newAffairInfo.value.value6='不可加入'
                break;
              case 2:
              newAffairInfo.value.value6='停用'
                break;
            }
            if(newAffairInfo.value.value3=0){
              newAffairInfo.value.value3='院级'
            }
            else{
              newAffairInfo.value.value3='校级'
            }
            if(newAffairInfo.value.value1==null){
              modifyJuide.value.clubName=false;
            }
            if(newAffairInfo.value.value2==null){
              modifyJuide.value.admin=false;
            }
            if(newAffairInfo.value.value3==null){
              modifyJuide.value.level=false;
            }
            if(newAffairInfo.value.value4==null){
              modifyJuide.value.introduction=false;
            }
            if(newAffairInfo.value.value5==null){
              modifyJuide.value.avatar=false;
            }
            if(newAffairInfo.value.value6==null){
              modifyJuide.value.state=false;
            }
            clearShow();
            modifyClub.value=true;

          break;
        }
      }
    }
    else if(data.bigAffairType==2){
      switch(data.affairType){
        case 1:{
          affairName.value='请求加入社团'
          clearShow();
          joinClub.value=true;
          ifReason.value=true;
          newAffairInfo.value.reason = data.reason;
          break;
        }
        case 2:{
          affairName.value='请求退出社团'
          clearShow();
          exitClub.value=true;
          ifReason.value=true;
          newAffairInfo.value.reason = data.reason;
          break;
        }
        case 3:{
          affairName.value = '请求发表文章';
          clearShow();
          createArticle.value=true;
          newAffairInfo.value = data;
          if (newAffairInfo.value.value3 == 0)
            newAffairInfo.value.value3 = '文章';
          if (newAffairInfo.value.value3 == 1) {
            newAffairInfo.value.value3 = '视频';
          }
          const result = await api.getArticle(newAffairInfo.value.value4);
            if(result[0] == 0) {
              articleContent.value = result[1].data;
            }
            else{
              showMessageTip('文章内容获取失败', 'error');
              return;
            }
          break;
        }
        case 4:{
          affairName.value='请求修改文章内容';
          clearShow();
          modifyArticle.value=true;
          newAffairInfo.value =data;
          if(newAffairInfo.value.value1==null){
              modifyJuide.value.articleName=false;
            }
            if(newAffairInfo.value.value3==null){
              modifyJuide.value.articleType=false;
            }
            else{
              if(newAffairInfo.value.value3==0)
              newAffairInfo.value.value3='文章';
              if(newAffairInfo.value.value3==1){
              newAffairInfo.value.value3='视频';
              }
            }
            if(newAffairInfo.value.value4==null){
              modifyJuide.value.article=false;
            }
            else{
              const result = await api.getArticle(newAffairInfo.value.value4);
              if(result[0] == 0) {
                articleContent.value = result[1].data;
              }
              else{
                showMessageTip('文章内容获取失败', 'error');
                return;
              }
            }
            if(newAffairInfo.value.value5==null){
              modifyJuide.value.headImage=false;
            }
            if(newAffairInfo.value.value2==null){
              modifyJuide.value.clubId=false;
            }
            else{
              const clubNameResult = await api.getBasicClubInfo({ clubId:newAffairInfo.value.value2});
          
          if(clubNameResult[0]==0){
            const clubName = clubNameResult[1].data.data.clubName;
            newAffairInfo.value.value2=clubName;

          }
          else{
            showMessageTip('网络请求失败','error')
          }
            }
            
          break;
        }
      }
    }

  }
  else{
    showMessageTip('网络请求失败','error')
  }
}
const clearShow=()=>{
newClub.value=false;
joinClub.value=false;
exitClub.value=false;
modifyClub.value=false;
createArticle.value=false;
modifyArticle.value=false;
ifReason.value=false;
}
const onAccept = async (rowData) => {
  const data = reactive({
    id: rowData.affairId
  })
  const result = await api.affairAccept(data);
  if(result[0] == 0){
    if(result[1].data.code == 1){
      showMessageTip("操作成功！",'success');
      handleUpdateList();
      return;
    }
    else{
      showMessageTip("操作失败！",'error')
      return;
    }
  }
  else{
    showMessageTip("操作失败！",'error')
    return;
  }
};
const onReject = async (rowData) => {
  const data = reactive({
    id: rowData.affairId
  })
  const result = await api.affairReject(data);
  if(result[0] == 0){
    if(result[1].data.code == 1){
      showMessageTip("操作成功！",'success');
      handleUpdateList();
      return;
    }
    else{
      showMessageTip("操作失败！",'error')
      return;
    }
  }
  else{
    showMessageTip("操作失败！",'error')
    return;
  }
}
const handleUpdateList = async () => {
  const resData = reactive({
    page:currentPage.value,
    pageSize:pageSize.value,
  })
  if(typeSelect.value != 0){
    resData.type = typeSelect.value;
  }
  const result = await api.getTransactionList(resData);
  switch(result[0])
    {
      case 0:
        const data = result[1].data;
        if(data.code == 1){
          totalNum.value = data.data.total;
          const tableData =  data.data.rows;
          totalPage.value = Math.ceil(totalNum.value/pageSize.value);
          affListData.value=[];
          for(let i=0; i< tableData.length;i++){
            const item = tableData[i];
            const affType = ref();
            affType.value = typeList.value.find(tmp => tmp['value'] === item.affairType);
            affListData.value.push({
              affairId:item.affairId,
              userName:item.userName,
              submitTime: item.createTime.replace("T",'  '),
              type:affType.value.label,
              affName:item.clubName
            })
          }
        }
        else{
          showMessageTip("获取数据失败！",'error');
          return;
        }
        break;
      case 1:
        showMessageTip("服务器响应错误，代码:"+result[1].status+"，请再次尝试",'error')
        break;
      case 2:
        showMessageTip("连接服务器失败,请检查网络",'error')
        break;
      case 3:
        showMessageTip("请求发送失败",'error')
        break;
    }
    setCurrentPage.value = currentPage.value;
}
const onChangePage = async () => {
  if(Number(setCurrentPage.value) > totalPage.value){
    setCurrentPage.value = totalPage.value;
    currentPage.value = totalPage.value;
  }
  else if(setCurrentPage.value <=0 ){
    setCurrentPage.value = 1;
    currentPage.value = 1;
  }
  else{
    currentPage.value = Number(setCurrentPage.value);
  }
  await handleUpdateList();
}
const onOptionChange = () => {
  setCurrentPage.value = 1;
  currentPage.value = 1;
}

watch(pageSize, async (newQuestion, oldQuestion) =>{
  await handleUpdateList();
})
watch(typeSelect, async (newQuestion, oldQuestion) =>{
  await handleUpdateList();
})
</script>

<style scoped>
.clubListMain {
  width: 100%;
}

.searchText {
  width: 240px;
  margin-right: 20px;
}

.tableClass {
  text-align: center;
}

.listTable {
  margin-top: 12px;
}

:deep(.listTable .el-table__header-wrapper th) {
  background-color: #549DFD;
  color: #fff;
  font-family: 'Microsoft YaHei';
}

#buttonYes {
  border: none;
  background-color: #009900;
  color: #FFF;
}

#buttonAffShow {
  border: #549DFD 1.5px solid;
  color: #549DFD;
}
#buttonNo {
  border: none;
  background-color: #f05f22;
  color: #ffffff;
}
.footerpager{
  margin-top: 20px;
  padding-left: 5px;
  display: flex;
}
.pageNow{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
}
.pageInput{
  margin-left: 5px;
  margin-right: 5px;
  width: 25px;
  text-align: center;
}
.card-header{
  padding-left: 5px;
}
.dialogItem{
  line-height: 20px;
  margin-top: 4%; 
}
.littleTitle{
  font-weight: bold;
}
.imageAvatar{
  width: 50px;
  height: auto;
}
</style>